<template>
	<div class="goods_details table-theme">
		<head-back-title title="审核详情"></head-back-title>
		<el-card>
			<el-form :model="goodsInfo" ref="goodsInfo" label-width="120px">
				<div class="goods-info" v-if="goodsInfo !=''">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="商品名称:" prop=""><el-input disabled v-model="goodsInfo.goods_name" placeholder="请输入商品名称"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="出厂价格:" prop=""><el-input disabled v-model="goodsInfo.factory_price" placeholder="请输入内容"></el-input></el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="运费:" prop=""><el-input disabled v-model="goodsInfo.paramter.express_price" placeholder="请输入运费"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="工厂货号:" prop=""><el-input disabled v-model="goodsInfo.lining_sn" placeholder="请输入内容"></el-input></el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="平台货号:" prop=""><el-input disabled v-model="goodsInfo.goods_sn" placeholder="请输入内容"></el-input></el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商品产地:" prop=""><el-input disabled v-model="goodsInfo.lining_address" placeholder="请输入内容"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="风格分类:" prop="">
								<el-select disabled v-model="goodsInfo.style_id" placeholder="请选择">
									<el-option v-for="item in StyleList" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="空间分类:" prop="">
								<el-select disabled v-model="goodsInfo.space_id" placeholder="请选择">
									<el-option v-for="item in SpaceList" :key="item.space_id" :label="item.space_name" :value="item.space_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="品类分类:" prop="">
								<el-select disabled v-model="goodsInfo.class_id" placeholder="请选择">
									<el-option v-for="item in ClassList" :key="item.class_id" :label="item.class_name" :value="item.class_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="材质:" prop="">
								<el-select disabled v-model="goodsInfo.paramter.texture_id" placeholder="请选择">
									<el-option v-for="item in TextureList" :key="item.texture_id" :label="item.texture_name" :value="item.texture_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="填充物:" prop="">
								<el-select disabled v-model="goodsInfo.paramter.filler_id" placeholder="请选择">
									<el-option value="1" label="高密度海绵"></el-option>
									<el-option value="2" label="公子棉"></el-option>
									<el-option value="3" label="乳胶"></el-option>
									<el-option value="4" label="羽绒"></el-option>
									<el-option value="5" label="弹簧包"></el-option>
									<el-option value="6" label="太空棉"></el-option>
									<el-option value="7" label="其他"></el-option>
									<el-option value="8" label="无"></el-option>
									<el-option value="9" label="海绵+羽绒"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工艺:" prop="">
								<el-select disabled v-model="goodsInfo.paramter.craft_id" placeholder="请选择">
									<el-option value="1" label="手工雕刻工艺"></el-option>
									<el-option value="3" label="钢琴烤漆工艺"></el-option>
									<el-option value="4" label="复古铜钉工艺"></el-option>
									<el-option value="5" label="水晶拉扣工艺"></el-option>
									<el-option value="6" label="仿古做旧工艺"></el-option>
									<el-option value="7" label="皮拉扣工艺"></el-option>
									<el-option value="8" label="不锈钢拉丝工艺"></el-option>
									<el-option value="9" label="不锈钢镀金工艺"></el-option>
									<el-option value="10" label="喷金工艺"></el-option>
									<el-option value="11" label="描金工艺"></el-option>
									<el-option value="12" label="描银工艺"></el-option>
									<el-option value="13" label="拼花工艺"></el-option>
									<el-option value="14" label="间棉工艺"></el-option>
									<el-option value="15" label="其他"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="包装件数:" prop="">
								<el-select disabled v-model="goodsInfo.paramter.pack_id" placeholder="请选择">
									<el-option value="1" label="1件"></el-option>
									<el-option value="2" label="2件"></el-option>
									<el-option value="3" label="3件"></el-option>
									<el-option value="4" label="4件"></el-option>
									<el-option value="5" label="5件"></el-option>
									<el-option value="6" label="6件"></el-option>
									<el-option value="7" label="7件"></el-option>
									<el-option value="8" label="8件"></el-option>
									<el-option value="9" label="9件"></el-option>
									<el-option value="10" label="10件"></el-option>
									<el-option value="11" label="两件一包"></el-option>
									<el-option value="12" label="三件一包"></el-option>
									<el-option value="13" label="四件一包"></el-option>
									<el-option value="14" label="五件一包"></el-option>
									<el-option value="15" label="11件"></el-option>
									<el-option value="16" label="12件"></el-option>
									<el-option value="17" label="13件"></el-option>
									<el-option value="18" label="14件"></el-option>
									<el-option value="19" label="15件"></el-option>
									<el-option value="20" label="16件"></el-option>
									<el-option value="21" label="17件"></el-option>
									<el-option value="22" label="18件"></el-option>
									<el-option value="23" label="19件"></el-option>
									<el-option value="24" label="20件"></el-option>
									<el-option value="25" label="21件"></el-option>
									<el-option value="26" label="22件"></el-option>
									<el-option value="27" label="23件"></el-option>
									<el-option value="28" label="24件"></el-option>
									<el-option value="29" label="25件"></el-option>
									<el-option value="30" label="26件"></el-option>
									<el-option value="31" label="27件"></el-option>
									<el-option value="32" label="28件"></el-option>
									<el-option value="33" label="29件"></el-option>
									<el-option value="34" label="30件"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="包装体积:" prop=""><el-input disabled v-model="goodsInfo.paramter.bulk" placeholder="请输入内容"></el-input></el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="服务:" prop="">
								<el-select disabled v-model="goodsInfo.paramter.serve_id" placeholder="请选择">
									<el-option value="1" label="包送、包安装"></el-option>
									<el-option value="2" label="包送"></el-option>
									<el-option value="3" label="包安装"></el-option>
									<el-option value="4" label="无"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="货期:" prop="">
								<el-select disabled v-model="goodsInfo.paramter.send_id" placeholder="请选择">
									<el-option value="1" label="10天"></el-option>
									<el-option value="2" label="15天"></el-option>
									<el-option value="3" label="20天"></el-option>
									<el-option value="4" label="25天"></el-option>
									<el-option value="5" label="30天"></el-option>
									<el-option value="6" label="35天"></el-option>
									<el-option value="7" label="40天"></el-option>
									<el-option value="8" label="45天"></el-option>
									<el-option value="9" label="50天"></el-option>
									<el-option value="10" label="55天"></el-option>
									<el-option value="11" label="60天"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="物流:" prop="">
								<el-select disabled v-model="goodsInfo.paramter.express_id" placeholder="请选择">
									<el-option value="1" label="买家承当运费"></el-option>
									<el-option value="2" label="卖家承担运费"></el-option>
									<el-option value="3" label="包邮"></el-option>
									<el-option value="4" label="申通快递"></el-option>
									<el-option value="5" label="顺丰速递"></el-option>
									<el-option value="6" label="圆通快递"></el-option>
									<el-option value="7" label="韵达快递"></el-option>
									<el-option value="8" label="百世汇通"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="安装方式:" prop="">
								<el-select disabled v-model="goodsInfo.paramter.install_id" placeholder="请选择">
									<el-option value="1" label="整装"></el-option>
									<el-option value="2" label="组装"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="14">
							<el-form-item label="商品简介:" prop=""><el-input disabled type="textarea" :rows="4" placeholder="请输入内容" v-model="goodsInfo.paramter.brief"></el-input></el-form-item>
						</el-col>
					</el-row>
					<p class="title">旧SKU信息</p>
					<el-table :data="oldSkuList" border class="factory-table">
						<el-table-column label="ID" align="center" prop="sku_id" width="80"></el-table-column>
						<el-table-column label="sku款号" align="center" width="220px">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.sku_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="尺寸" align="center" width="180px">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.size" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="材质" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.lining" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="颜色" align="center" width="120">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<ImgPopover :src="scope.row.img"></ImgPopover>
							</template>
						</el-table-column>
						<el-table-column label="出厂价" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.factory_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="自营价" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.self_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="零售价" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.retail_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="包件" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.pack" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="体积" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.bulk" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="起售量" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.coefficient_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="件数" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.sku_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
					</el-table>
                    <p class="title" style="margin-top: 30px;">新SKU信息</p>
					<el-table :data="newSkuList" border class="factory-table">
						<el-table-column label="ID" align="center" prop="sku_id" width="80"></el-table-column>
						<el-table-column label="sku款号" align="center" width="220px">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.sku_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="尺寸" align="center" width="180px">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.size" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="材质" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.lining" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="颜色" align="center" width="120">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<ImgPopover :src="scope.row.img"></ImgPopover>
							</template>
						</el-table-column>
						<el-table-column label="出厂价" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.factory_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="自营价" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.self_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="零售价" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.retail_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="包件" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.pack" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="体积" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.bulk" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="起售量" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.coefficient_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="件数" align="center">
							<template slot-scope="scope">
								<el-input disabled v-model="scope.row.sku_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
					</el-table>
					<div class="goods-image">
						<p class="title" style="font-size: 20px;">商品图片</p>
						<div class="main-image">
							<el-row :gutter="20">
								<el-col :span="6">
									<el-form-item label="主图:" prop="">
										<el-upload
										disabled
											ref="upload"
											action="fakeaction"
											:http-request=" function(res) { return upload(res); } " multipleaccept="image/*" :show-file-list="false" > <img v-if="goodsInfo.image_middle" :src="goodsInfo.image_middle" width="100%" />
											<i v-else class="el-icon-plus"></i>
										</el-upload>
									</el-form-item>
								</el-col>
								<el-col :span="18">
									<el-form-item label="副图(最多四张):" prop="">
										<el-upload
										disabled
											action=""
											list-type="picture-card"
											:file-list="vice_middle"
											multiple
											:limit="4"
											:on-preview="handlePictureCardPreview"
											:on-remove="handleRemove"
										>
											<i class="el-icon-plus"></i>
										</el-upload>
										<el-dialog :visible.sync="dialogVisible" width="800px" center :modal-append-to-body="false">
											<img width="100%" :src="dialogImageUrl" alt="" />
										</el-dialog>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="视频:" prop="">
										<el-upload
										disabled
											class="el-upload-picture"
											ref="upload"
											action="fakeaction"
											:show-file-list="false"
											:http-request=" function(res) { return uploadVideo(res); } " accept="video/mp4,avi" > <video v-if="goodsInfo.video" :src="goodsInfo.video" width="100%" />
											<i v-else class="el-icon-plus"></i>
										</el-upload>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
						<p class="title" style="font-size: 20px;">产品详情图</p>
						<div class="detail-image">
							<el-upload
							disabled
								multiple
								action="https://jsonplaceholder.typicode.com/posts/"
								:on-preview="handlePreview"
								:on-remove="remove"
								:file-list="img_info"
								list-type="picture"
							>
								<el-button size="small" type="primary" disabled>点击上传</el-button>
								<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
							</el-upload>
						</div>
					</div>
				</div>
			</el-form>
			
			<div style="margin-top: 30px;">
				<el-button v-if="goodsInfo.examine_status == 0" type="primary" @click="operate(0)" style="margin-left: 100px;">审核</el-button>
				<el-button v-if="goodsInfo.examine_status == 0" type="danger" @click="operate(1)" style="margin-left: 40px;">拒绝</el-button>
			</div>
		</el-card>
		<!-- 拒绝原因弹框 -->
		<el-dialog title="拒绝原因" :visible.sync="remarksDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="remarksForm" :rules="remarksFormRules" ref="remarksForm" label-width="120px">
				<el-form-item label="拒绝原因:" prop="refuse_reason">
					<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="remarksForm.refuse_reason"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="remarksDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('remarksForm')">确 定</el-button>
			</span>
		</el-dialog> </div>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
export default {
	components: {
		ImgPopover
	},
	data() {
		return {
			vice_middle: [],
			img_info: [],
			dialogImageUrl: '',
			dialogVisible: false,
			goodsInfo: '',
			newSkuList:[],
			oldSkuList:[],
			StyleList: [], // 风格
			SpaceList: [], // 空间
			TextureList: [], // 材质
			ClassList: [] ,// 品类
			remarksDialog: false,
			remarksForm: {
				refuse_reason: ''
			},
			remarksFormRules: {
				refuse_reason: [{ required: true, message: '请输入内容' }]
			},
		};
	},
	methods: {
		init() {
			let data = {
				goods_id: this.$route.query.id,
				paramter:1,
				examine_id:this.$route.query.examine_id
			};
			this.$http(this.$ApiList.e_goods_list, data).then(res => {
				if (res.code == 200) {
					this.goodsInfo = res.datas[0];
					this.goodsInfo.paramter.install_id = String(this.goodsInfo.paramter.install_id)
					this.goodsInfo.paramter.filler_id = String(this.goodsInfo.paramter.filler_id)
					this.goodsInfo.paramter.craft_id = String(this.goodsInfo.paramter.craft_id)
					this.goodsInfo.paramter.pack_id = String(this.goodsInfo.paramter.pack_id)
					this.goodsInfo.paramter.serve_id = String(this.goodsInfo.paramter.serve_id)
					this.goodsInfo.paramter.send_id = String(this.goodsInfo.paramter.send_id)
					this.goodsInfo.paramter.express_id = String(this.goodsInfo.paramter.express_id)
					for (let i in res.datas[0].vice_middle) {
						let item = {
							url: res.datas[0].vice_middle[i]
						};
						this.vice_middle.push(item);
					}
					for (let j in res.datas[0].img_info) {
						let item = {
							url: res.datas[0].img_info[j]
						};
						this.img_info.push(item);
					}
				}
			});
			
			this.$http(this.$ApiList.e_get_goods_sku, data).then(res => {
				if (res.code == 200) {
					this.newSkuList = res.datas;
				}
			});
			
			this.$http(this.$ApiList.old_get_goods_sku, data).then(res => {
				if (res.code == 200) {
					this.oldSkuList = res.datas;
				}
			});
		},
		getClassify() {
			// 风格
			this.$http(this.$ApiList.StyleList).then(res => {
				if (res.code == 200) {
					this.StyleList = res.datas;
				}
			});
			// 空间
			this.$http(this.$ApiList.SpaceList).then(res => {
				if (res.code == 200) {
					this.SpaceList = res.datas;
				}
			});
			// 材质
			this.$http(this.$ApiList.TextureList).then(res => {
				if (res.code == 200) {
					this.TextureList = res.datas;
				}
			});
			let data = {
				store_id: localStorage.getItem('shop_id')
			};
			// 品类
			this.$http(this.$ApiList.ClassList, data).then(res => {
				if (res.code == 200) {
					this.ClassList = res.datas;
				}
			});
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
			for (let i in this.vice_middle) {
				if (this.vice_middle[i].uid == file.uid) {
					delete this.vice_middle[i];
				}
			}
			console.log(this.vice_middle);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		// 图片上传
		upload(params) {
			const file = params.file,
				fileType = file.type,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 1024;

			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于1M');
				return;
			}
			const form = new FormData();
			form.append('file[]', file);
		},
		// 视频上传
		uploadVideo(params) {
			const file = params.file,
				isLt20MB = file.size / 1024 / 1024 < 20;
			if (!isLt20MB) {
				this.$message.error('视频不能大于20MB！');
				return;
			}
			const form = new FormData();
			form.append('file[]', file);
			return;
			this.$http(this.$ApiList.UpVideo, form).then(res => {});
		},
		remove(file, fileList) {
			console.log(file, fileList);
		},
		handlePreview(file) {
			console.log(file);
		},
		// 0 审核 1 拒绝
		operate(type) {
			let data = {
				examine_id: this.$route.query.examine_id
			};
			switch (type) {
				case 0:
					this.$http(this.$ApiList.ExamineSuccess, data).then(res => {
						if (res.code == 200) {
							this.$layer.msg('操作成功');
						}else if(res.code == 203){
							this.$layer.msg(res.datas);
						}
					});
					break;
				case 1:
				    this.remarksDialog = true
					this.remarksForm.examine_id = this.$route.query.examine_id
					break;
			}
		},
		//提交
		confirmClick(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.CommentRefuse, this.remarksForm).then(res => {
						if (res.code == 200) {
							this.$layer.msg('操作成功');
							this.remarksDialog = false
							this.init()
						}
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
	},
	created() {
		this.init();
		this.getClassify();
	}
};
</script>

<style>
.main-image .el-upload {
	background-color: #fbfdff;
	border: 1px dashed #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	width: 148px;
	height: 148px;
	cursor: pointer;
	line-height: 146px;
	vertical-align: top;
}
.main-image .el-upload .el-icon-plus {
	font-size: 28px;
	color: #8c939d;
}

.detail-image .el-upload-list--picture .el-upload-list__item {
	height: auto;
}
.detail-image .el-upload-list__item img {
	width: 100%;
	height: 100%;
}
.goods-image{
	margin-top: 30px;	
}
</style>
